<script lang="ts" setup>
// 导入 reactive 函数，用于处理响应式数据，类似鸿蒙的 @State 装饰器
import { reactive } from 'vue'

// 把普通对象通过 reactive 包装一下即可变成响应式对象
const obj = reactive({ name: '张三', age: 18 })

const addAge = () => {
  obj.age++
  console.log(obj)
}
</script>

<template>
  <p>{{ obj }}</p>
  <button @click="addAge()">点击加一岁</button>
</template>

<style scoped></style>